<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/jquery-3.3.1.min.js"></script>
    <script>
        $(function () {
            // $.ajax({
            //     // 2) 创建一个新的 HTTP 请求,并指定该 HTTP 请求的方法、URL 及验证信息
            //     type:"get",
            //     url:"./00 data.json",
            //     // data:{id:10001},//请求参数.
            //     // data:"id=10001&&name=zhangsan",(默认: "application/x-www-form-urlencoded")
            //     // contentType:"",//请求格式  参数的格式
            //     dataType:"json",//返回数据格式  改的是服务器的格式
            //     success:function(data){
            //         console.log(data);
            //         if (data.status===200) {
            //             var cls=data.data;
            //             $("legend").text(cls.name);

            //             var students=cls.student;
            //             for (let i = 0; i < students.length; i++) {
            //                 const stu = students[i];
            //                 $(".data tbody").append("<tr><td>"+stu.id+"</td><td>"+stu.name+"</td></tr>");
            //             } 
            //         }else{
            //             console.log(data.msg);
            //         }
            //     },
            //     error:function(res){
            //         console.log(res);
            //     }
            // })   

            //url success
            //url [data] success [dataType]
            $.get("./00 data.json",function(data){
                if (data.status===200) {
                    var cls=data.data;
                    $("legend").text(cls.name);

                    var students=cls.student;
                    for (let i = 0; i < students.length; i++) {
                        const stu = students[i];
                        $(".data tbody").append("<tr><td>"+stu.id+"</td><td>"+stu.name+"</td></tr>");
                    } 
                }else{
                    console.log(data.msg);
                }
            }) 
            //url [data] success [dataType]
            //$.post()
        })
    </script>
</head>
<body>
    <table class="data">
        <legend></legend>
        <thead>
            <th>id</th>
            <th>name</th>
            <tbody>
                <!-- <tr></tr> -->
            </tbody>
        </thead>
    </table>
</body>
</html>